<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//添加立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 8;
// camera.position.x = 5;
// camera.position.y = 5;

//创建一个坐标轴
function createAxes () {
  //参数：坐标轴长度
  const axesHelper = new THREE.AxesHelper(5)
  //坐标轴也是一个物体需要加入到场景中使用(特殊)
  //物体虽然试几何图形+材质皮肤决定，坐标轴构造函数里决定好线段图形和颜色
  scene.add(axesHelper)
}
//调用创建坐标轴
createAxes()



//适配画布大小
function resize () {
  window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    //重新根据响应改变物体的宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    //更新摄像机矩阵空间(让摄像机重新计算每个像素点位置和大小)
    camera.updateProjectionMatrix()
  })
}
resize()

function moveCube () {
  // 1、位移（参考父级）
  //立方体移动 使用物体的方法 => 物体的移动
  //cube.position拿到的是Vector3三维向量对象(世界坐标系中X,Y,Z坐标的那位置)
  // cube.position.x = 5
  cube.position.set(5, 0, 0)

  // 2、旋转
  //cube.rotation原地的值Euler欧拉角对象(描述的绕着 x,y,z旋转轴)
  //从轴线的正方向来看物体，物体时绕着自身轴线的逆时针旋转
  cube.rotation.x = Math.PI / 4
  // const axes = new THREE.AxesHelper(3)
  // cube.add(axes)

  //3、缩放
  //沿着自身轴线进行缩放
  // 注意：中心点不动，向某个轴两边拉伸/缩小
  cube.scale.z = 2
}
moveCube()



//创建轨道控制器
//轨道控制器（控制摄像机位置 ）
let controls
function createOrbit () {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.update()
}
function animate () {
  requestAnimationFrame(animate)
  // cube.rotation.x += 0.01
  controls.update();
  renderer.render(scene, camera)
}
createOrbit()
animate()

renderer.render(scene, camera)


</script>

<template></template>

<style scoped>
</style>
